<template>
	<div id="theme" class="container">
		<h3 class="title"><span />模板管理</h3>

		<div class="content">
			<el-tabs id="tabcard" v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="已安装模板" name="first">
					<Moulded v-if="activeName == 'first'" />
				</el-tab-pane>
				<el-tab-pane label="系统模板" name="second">
					<BouncedDialog title="安装模板" :dialog-show.sync="dialogShow" width="50%" class="dialog">
						<el-form
							ref="themeForm"
							:model="themeForm"
							inline
							:rules="themeRules"
							label-width="70px"
						>
							<el-form-item label="模板：" prop="theme">
								<el-input v-model="themeForm.theme" disabled />
							</el-form-item>
							<el-form-item label="站点：" prop="website_id">
								<el-select
									v-model="themeForm.website_id"
									placeholder="请选择"
									disabled
									style="width: 100%"
									@change="handleChange"
								>
									<el-option
										v-for="item in options"
										:key="item.id"
										:label="item.domain"
										:value="item.id"
									/>
								</el-select>
							</el-form-item>
							<el-form-item label="语言" prop="lang">
								<el-select v-model="themeForm.lang" style="width: 100%">
									<el-option
										v-for="item in themeLang"
										:key="item.id"
										:label="item.lang"
										:value="item.lang"
									/>
								</el-select>
							</el-form-item>
							<div class="btn">
								<el-button @click="dialogShow = false">取 消</el-button>
								<el-button type="primary" :loading="loading" @click="submittheme()"
									>确 定</el-button
								>
							</div>
						</el-form>
					</BouncedDialog>
					<el-table :data="themeList">
						<el-table-column label="模板" prop="theme" />
						<el-table-column label="版本号" prop="version" />
						<el-table-column label="语言" prop="lang" />
						<el-table-column label="作者" prop="author" />
						<el-table-column label="模板描述" prop="description" />
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="primary" size="mini" @click="install(scope.row)"
									>模板安装</el-button
								>
								<el-button type="primary" class="blue" size="mini" @click="goDele(scope.row)"
									>模板删除</el-button
								>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>
<script>
import Moulded from './components/installedMould.vue'
import themeApi from '@/api/theme.js'
import websiteApi from '@/api/website.js'
import langApi from '@/api/websetting'
export default {
	components: {
		Moulded,
	},
	data() {
		return {
			activeName: 'first',
			themeList: [],
			dialogShow: false,
			options: [],
			themeForm: {
				website_id: '',
			},
			themeRules: {
				website_id: [{ required: 'true', message: '请选择站点', trigger: 'blur' }],
			},
			themeLang: [],
			loading: false,
		}
	},
	computed: {
		siteId1() {
			return this.$store.getters.siteId
		},
	},
	watch: {
		siteId1(val, value) {
			this.themeForm.website_id = val
		},
	},
	created() {
		// if (this.themeForm.website_id) {
		this.themeForm.website_id = this.$store.getters.siteId
		this.getList()
		this.getLang()
		// }
	},
	methods: {
		// 站点语言列表
		getLang() {
			langApi.langInfo({ site_id: this.themeForm.website_id }).then((res) => {
				this.themeLang = res.data
			})
		},
		// 系统模板
		getList() {
			themeApi.themeList().then((res) => {
				this.themeList = res.data
			})
		},
		// 模板安装
		install(row) {
			this.getWeblist()
			this.getLang()
			this.themeForm.theme = row.theme
			this.dialogShow = true
		},
		// 模板删除
		goDele(row) {
			this.$confirm('此操作将永久删除该模板,是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					themeApi.deleteTheme({ theme: row.theme }).then((res) => {
						if (res.code == 0) {
							this.$message.success(res.msg)
						} else {
							this.$message.error(res.msg)
						}
					})
				})
				.catch(() => {
					this.$message({ type: 'info', message: '已取消' })
				})
		},
		submittheme() {
			this.loading = true
			themeApi.saveTheme({ ...this.themeForm }).then((res) => {
				if (res.code == 0) {
					this.loading = false
					this.$message.success(res.msg)
					this.dialogShow = false
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		// 获取站点列表
		getWeblist() {
			websiteApi.websiteList().then((res) => {
				this.options = res.data
				this.themeForm.website_id = this.$store.getters.siteId
			})
		},
		handleChange(val) {},
		handleClick(tab, event) {},
	},
}
</script>
<style lang="scss">
#theme {
	.el-form-item {
		width: 100%;
	}
	.el-form-item__content {
		width: calc(100% - 80px);
	}
}
</style>
<style lang="scss" scoped>
.content {
	// background-color: #fff;
	padding: 20px;
}
</style>
